<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/8/5
  Time: 11:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath()+"/";%>

<!doctype html>
<html>
<head>
    <base href="<%=path%>">
    <title>角色列表</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <style>
        .border{
            border-radius: 8px;
            background-color: #ffffff;
        }
        *{
            margin:0px;
            padding:0px;
        }
        body {
            font-family: "open sans","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 13px;
        }
    </style>
</head>
<body>
<div class="container" style="background-color: #f3f3f4;width: 100%;">
    <div class="row a" style="margin-right: 0px;margin-left: 0px;">
        <div class="col-md-12" style="padding:0px;height:678px;">
            <div class="row border" style="margin:10px 10px;padding:10px 0px;">
                <div class="col-md-12">
                    <form class="form-inline" id="form1">
                        <div class="form-group" style="margin-bottom: 10px;">
                            <label for="exampleInputName2">角色名称：</label>
                            <input type="text" class="form-control" name="roleName" id="exampleInputName2" placeholder="登录名">
                        </div>
                        <div class="form-group" style="margin-bottom: 10px;">
                            <button type="button" onclick="$.table.refresh();" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-search"></span>搜索</button>
                            <button type="reset" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-refresh"></span>重置</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row border"  style="margin:10px 10px;padding:10px 0px;">
                <div class="col-md-12" >
                    <table id="table"></table>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div id="toolbar">
            <!-- Indicates a successful or positive action -->
            <button type="button" class="btn btn-success btn-sm" onclick="$.operator.addOrEdit('role/toEdit','新增角色信息')"><span class="glyphicon glyphicon-plus"></span> 新增</button>

            <button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-edit"></span> 修改</button>

            <button type="button" onclick="$.operator.deletes('user/deletes');" class="btn btn-warning btn-sm" title="支持批量删除"><span class="glyphicon glyphicon-trash"></span> 删除</button>

            <button type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-print"></span> 打印</button>

        </div>
    </div>

</div>
</body>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript" src="js/bootstrap/rbac.js"></script>
<style>
    .header{
    }
    .idColor{
        color:yellow;
    }
</style>
<script>

    function deletes(){
        let ids = $.table.getSelections();
        console.info(JSON.stringify(ids))
    }
    var columns=[{
            title:"复选框",
            checkbox:true
        },{
            field: 'id',
            titleTooltip:'这是主键',
            width:100,
            widthUnit:'px',
            align:'center',
            halign:'center',
            title: 'ID',
            sortable:true,
            clickToSelect:true,
            sorter:function(fieldA,fieldB,rowA,rowB){
                console.info('排序......')
                return fieldB-fieldA;
            }
            
        }, {
            field: 'roleName',
            title: '角色名称'
        },  {
        field: 'permission',
        title: '权限字符'
    }, {
        field: 'showOrder',
        title: '显示顺序'
    }, {
        field: 'status',
        title: '角色状态',
        formatter:function(value, row, index){
            if(value==1){
                return '<span class="label label-success">启用</span>';
            }
            return '<span class="label label-danger">禁用</span>';
        }
    },{
            title:'操作',
            align: 'center',
            formatter:function(value,row,index){
                console.info(JSON.stringify(row))
                return '<a href="javascript:void(0)" onclick="$.operator.addOrEdit(\'role/toEdit?id='+row.id+'\',\'编辑用户信息\')" title="编辑"><span class="glyphicon glyphicon-edit"></span></a>&nbsp;<a href="javascript:void(0)" onclick="tableDelete(\''+row.id+'\')" title="删除"><span class="glyphicon glyphicon-trash"></span></a><a href="javascript:void(0)" onclick="$.modal.openWindowFull(\'user/toList2?roleId='+row.id+'\',\'分配用户信息\')" title="分配用户"><span class="glyphicon glyphicon-trash"></span></a>';
            }
        }];
    $.table.init('table',columns,'role');
        function tableDelete(id){
            $.operator.delete('user/delete/'+id);
        }
        function close(){
            layer.close(index);
        }
        function refresh(){
            $.table.refresh();
        }
</script>
</html>

